<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Regions: :hover on content node when the content node has position:fixed</title>
	<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
	<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
	<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
	<meta name="assert" content="CSS rules using the :hover pseudo class are applied to content nodes that have position:fixed.">
	<meta name="flags" content="interact">
	<style>
	#source {
		position: fixed;
		right: 0;
		top: 0;
		font-family: Ahem;
		font-size: 20px;
		line-height: 1em;
		width: 5em;
		height: 5em;
		flow-into: f;
	}
	#parent {
		color: blue;
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
	#source:hover {
		color: lime;
	}
	#region {
		flow-from: f;
	}
	.region {
		width: 100px;
		height: 100px;
	}
	.region p {
		width: 100%;
		height: 50%;
		background-color: red;
	}
	</style>
</head>
<body>
	<ol>
		<li>You should not see any red before or during this test</li>
		<li>You should see a yellow and a blue square below</li>
		<li>Move the mouse over the blue square</li>
		<li>The blue square should turn green</li>
	</ol>
	<div id="parent">
		<div id="source">xxxxx<br>xxxxx<br>xxxxx<br>xxxxx<br>xxxxx</div>
	</div>
	<div class="region" id="region">
		<p></p>
	</div>
</body>
</html>